<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 
.cnt{text-align:center;width:600px;height:350px;margin:0 auto;border:1px solid #ddd;} 
</style> 
</head> 
<body> 
<div class="cnt"> 
	<img id="img" src="images/banner1.jpg" alt="alipay" style="border: 1px solid #0000FF;" />
</div> 
<script> 
window.onload = function() { 
var img = document.getElementById('img'), 
/** 
* 图片按比例自适应缩放 
* @param img {Element} 用户上传的图片 
* @param maxWidth {Number} 预览区域的最大宽度 
* @param maxHeight {Number} 预览区域的最大高度 
*/ 
resizeImg = function(img, maxWidth, maxHeight){ 
var w = img.width, 
h = img.height; 
alert(w)
alert(h)
// 当图片比预览区域小时不做任何改变 
if(w < maxWidth && h < maxHeight) return; 
// 当实际图片比例大于预览区域宽高比例时 
// 缩放图片宽度，反之缩放图片宽度 
w/h > maxWidth/maxHeight ? img.width = maxWidth : img.height = maxHeight; 
}; 
resizeImg(img, 120, 180); 
} 
</script> 
</body> 
</html> 